//下拉参看组件

import { Dropdown, Menu, Icon, Button } from "antd"
import styles from "./dropStyle.less"

const DropDownItem = ({ dataSource }) => {
    // console.log(dataSource)
    // 使用递归的方式将入参构建成Menu嵌套组件，并返回
    let renderMenuItem = (data = []) => {
        return data.map((item) => {
            return (
                <Menu.Item key={item}><a style={{ color: "goldenrod" }}>{item}</a></Menu.Item>
            )
        })
    }

    let generateMenu = (data = []) => {
        return (
            <Menu>
                {renderMenuItem(data)}
            </Menu>
        )
    }

    const menu = generateMenu(dataSource)

    return (
        <Dropdown overlay={menu}>
            <Button className={styles.buttonStyle}> 
                {dataSource.length} {" 个元素"} <Icon type="eye-o" />
            </Button>
        </Dropdown>
    )
}

export default DropDownItem